<template>

    <div>
        <div class="addBtn">
            <el-button type="primary" @click="handleButtonAdd()">+ 添加</el-button>

            <el-dialog title="添加" :visible.sync="dialogTableVisible">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                   
                    <el-form-item label="图片">
                        <el-upload v-if="dialogImageUrl == ''" action="https://api.zctj16888.com/admin/v1/image/ossUpload"
                            list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess" name="image">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div v-else>
                            <img style="width: 146px;height: 146px;" :src="dialogImageUrl">
                            <i class="el-icon-delete" @click="deleteImg"></i>
                        </div>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>

                   

                    
                    
                    <el-form-item label="路径">
                        <el-input v-model="ruleForm.route"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="ruleForm.sort"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="是否显示">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="2">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>

                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm">确认</el-button>
                </div>
            </el-dialog>
        </div>

        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">
            </el-table-column>
            
            <el-table-column prop="img_url" label="图片" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 80px; height: 80px" :src="scope.row.img_url" fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" align="center">
            </el-table-column>
            
            
            <el-table-column prop="created_at" label="创建时间" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 1">
                        <div class="status-icon"></div>显示
                    </span>
                    <span v-if="scope.row.status == 2">
                        <div class="status-icon"></div>隐藏
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="handleButton1Click(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleButton2Click(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>

    </div>

</template>

<script>
import { param } from '@/utils';
import { uploadFile } from '../../../libs/util';
import { shopingSiwper as bannerList, shopingSiwperEdit as bannerModify, upImgData, shopingSiwperDel as bannerDelete } from '../../../libs/api'
export default {
    data() {
        return {
            rules: {
               
            },
            dialogImageUrl: '',
            dialogVisible: false,
            ruleForm: {},
            tableData: [],
            alltabData: [],
            dialogTableVisible: false,

            // 总数据
            tableData: [],
            currentPage: 1,
            totalCount: 1,
            PageSize: 5,
            pageSizes: [5, 10],
        }
    },
    created() {
        this.getBannerList()
    },
    methods: {
        UploadImage(params) {
            const formData = new FormData();
            formData.append("file", params.filename);
            console.log(formData)
            // upImgData({
            //   image:
            // })

        },
        // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage = val
            this.getBannerList()
        },
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {
            // 改变每页显示的条数 
            this.PageSize = val
            // 点击每页显示的条数时，显示第一页
            console.log(val)
            this.PageSize = val
            // 改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1
            this.getBannerList()
        },
        // 获取banner列表
        getBannerList() {
            bannerList({
                page: this.currentPage,
                limit: this.PageSize
            }).then(res => {
                console.log('接口1', res)
                this.tableData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
        },
        deleteImg() {
            this.dialogImageUrl = ''
        },
        // 修改banner
        clickConfirm() {
            console.log(this.ruleForm.type)
            if (this.ruleForm == '') {
                bannerModify({
                    position: this.ruleForm.position,
                    title: this.ruleForm.title,
                    status: this.ruleForm.status,
                    type: this.ruleForm.type,
                    op_id: this.ruleForm.op_id,
                    sort: this.ruleForm.sort,
                    img_url: this.ruleForm.img_url,
                    platform: this.ruleForm.platform,
                    route: this.ruleForm.route
                }).then(res => {
                    console.log('接口2', res)
                    this.getBannerList()
                })
            } else {
                bannerModify({
                    position: this.ruleForm.position,
                    title: this.ruleForm.title,
                    status: this.ruleForm.status,
                    type: this.ruleForm.type,
                    op_id: this.ruleForm.op_id,
                    sort: this.ruleForm.sort,
                    id: this.ruleForm.id,
                    route: this.ruleForm.route,
                    // img_url: this.ruleForm.img_url
                    img_url: this.dialogImageUrl,
                    platform: this.ruleForm.platform
                }).then(res => {
                    console.log('接口2', res)
                    this.getBannerList()
                })
            }

            this.dialogTableVisible = false
        },
        handleButton1Click(row) {
            // 处理按钮1点击事件
            this.ruleForm = row
            console.log(this.ruleForm)
            this.dialogImageUrl = this.ruleForm.img_url
            this.dialogTableVisible = true
        },
        handleButton2Click(row) {
            // 处理按钮2点击事件
            console.log(row)
            this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                bannerDelete({
                    id: row.id
                }).then(res => {
                    console.log('接口2', res)
                    if (res.code == 1) {
                        this.getBannerList()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleButtonAdd() {
            this.dialogTableVisible = true
        },
        clickDelete() {
            this.dialogTableVisible = false
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res)
            console.log(URL.createObjectURL(file.raw))
            // this.ruleForm.img_url = res.data.url
            this.dialogImageUrl = res.data.url
        },
        handleFileUpload(params, file) {
            console.log(file)
            // const file = params.file
            // var form = params.file.name
            // // form.append('image',file)
            // const url = 'image/ossUpload'
            // console.log(form)
            // upImgData({
            //   image:params.file
            // }).then(res=>{
            //   console.log(res)
            // })
            // uploadFile(url,form,(e)=>{
            //   if(e.lengthComputable){
            //     console.log(`Uploaded ${e.loaded} of ${e.total} bytes`)
            //   }
            // }).then(response=>{
            //   console.log('上传文件成功',response.data)
            // }).catch(error=>{
            //   console.log('上传文件失败',error)
            // })
        }
    }
}
</script>

<style>
.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.status-icon {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    margin-right: 5px;
    position: relative;
    left: 32px;
    bottom: -15px;
}

.icon1 {
    background-color: #19be6b;
}

.icon0 {
    background-color: #eb194d;
}
</style>